<template>
	<view class="root-wrap">
		<view class="banner"><image :src="detailInfo.bid_image" mode="aspectFill"></image></view>
		<view class="program-info">
			<view class="title-wrap">
				<text class="title">{{detailInfo.bid_name}}</text>
				<view v-if="detailInfo.bid_status=='报价期'" class="status status-0">{{detailInfo.bid_status}}</view>
				<view v-if="detailInfo.bid_status=='评选期'" class="status status-1">{{detailInfo.bid_status}}</view>
				<view v-if="detailInfo.bid_status=='中选'" class="status status-2">{{detailInfo.bid_status}}</view>
				<view v-if="detailInfo.bid_status=='落选'" class="status status-3">{{detailInfo.bid_status}}</view>
			</view>
			<view class="info-wrap">
				<view class="info">
					<view class="time start">
						<text class="label">发布时间：</text>
						<text class="date">{{formatTime(detailInfo.createtime)}}</text>
					</view><view class="time start">
						<text class="label">截止时间：</text>
						<text class="date">{{formatTime(detailInfo.endtime)}}</text>
					</view>
				</view>
			</view>
			<view class="groups">
				<text class="title">当前{{detailInfo.quotes?detailInfo.quotes.length:0}}家参与报价：</text>
				<view v-if="detailInfo.quotes&&detailInfo.quotes.length>0" class="group-logo">
					<view v-for="logo,i in detailInfo.quotes" class="logo-wrap" :key="i" :style="'z-index: '+(i+1)+';'"><image :src="logo.logo_image"></image></view>
				</view>
				<view v-else class="group-logo">
					<view class="logo-wrap"><image src="../../static/assets/imgs/group-empty.png"></image></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="detail-title">公共设施故障图片</view>
			<view class="detail-imgs">
				<div v-for="item,index in detailInfo.faults_images" :key="index" class="img"><image :src="item" mode="aspectFill"></image></div>
				</view>
			<view class="detail-title">任务描述</view>
			<view class="detail-desc">{{detailInfo.duty_content}}</view>
			<view class="detail-title">故障原因</view>
			<view class="detail-desc">{{detailInfo.faultscontent}}</view>
			<view class="detail-title">要求响应时间</view>
			<view class="detail-desc">{{detailInfo.response_str}}</view>
			<view class="detail-title">施工标准</view>
			<view class="detail-desc">{{detailInfo.sgbz_str}}</view>
		</view>
		<view class="oper-wrap">
			<view class="btn"><u-button @click="onCall(detailInfo.tel)" color="#fff" type="primary" shape="circle"><image class="icon" src="../../static/assets/imgs/icon-call.png"></image><text class="label">咨询项目</text></u-button></view>
			<view class="btn"><u-button @click="goQuotation" :disabled="detailInfo.bid_status!='报价期'" color="#fff" type="primary" shape="circle"><image class="icon" src="../../static/assets/imgs/icon-offer.png"></image><text class="label">我要报价</text></u-button></view>
		</view>
	</view>
</template>

<script>
	import utils from '../../util/index.js';
	import {getUserInfo} from '@/api/user.js';
	import { getProgramDetail } from '@/api/program.js';
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				userInfo: {},
				isLogin: false,
			};
		},
		onLoad(params){
			const { id } = params;
			if(!id){
				uni.showToast({
					title: '项目ID错误,请退出重试'
				})
				return
			}
			this.id = id;
			this.getDetailInfo();
		},
		onShow(){
			this.isLogin = this.vuex_has_login;
			this.userInfo = this.vuex_user;
			if(this.isLogin){
				this.getUserInfo();
			}
		},
		onShareAppMessage() {
		    return {
		      title: 'HSC报修比价', // 分享标题
		      path: '/pages/program/detail?id='+this.id, // 分享路径，必须是已经定义过的页面路径
		      success: function () {
		        // 分享成功回调
				uni.showToast({
					title: '分享成功',
					icon: 'none'
				})
		      },
		      fail: function () {
		        // 分享失败回调
		      }
		    };
		},
		onShareTimeline() {
			return {
				title: 'HSC报修比价', // 分享标题
				path: '/pages/program/detail?id='+this.id, // 分享路径，必须是已经定义过的页面路径
				success: function () {
				  // 分享成功回调
				  uni.showToast({
				  	title: '分享成功',
					icon: 'none'
				  })
				},
				fail: function () {
				  // 分享失败回调
				}
			};
		},
		methods:{
			formatTime(time){
				return utils.formatTime(time);
			},
			getUserInfo(){
				getUserInfo().then((res)=>{
					if (1 == res.code) {
						this.userInfo = res.data;
						this.$u.vuex('vuex_user', res.data)
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getDetailInfo(){
				let that = this;
				getProgramDetail({bid_id:that.id}).then((res)=>{
					if (1 == res.code) {
						that.detailInfo = res.data
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			goQuotation(){
				if(!this.vuex_has_login){
					uni.showToast({
						title: '请先登录',
						icon:'none'
					})
				}else if(this.userInfo.status!='normal'){
					uni.showToast({
						title: `你当前状态为${this.userInfo.status_text}, 不能参与报价`,
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:'/pages/program/quotation?id='+this.id
					})
				}
			},
			onCall(tel){
				uni.makePhoneCall({
				  phoneNumber: tel // 拨打的电话号码
				});
			}
		}
	}
</script>

<style lang="scss">
	.root-wrap{
		.banner{
			width: 750rpx;
			height: 320rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.program-info{
			box-sizing: border-box;
			width: 702rpx;
			height: 324rpx;
			margin: 24rpx 24rpx 0;
			padding: 0 24rpx 24rpx;
			background-color: #F3F4F6;
			border-radius: 8rpx;
			.title-wrap{
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				width: 100%;
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				padding: 24rpx 0;
				border-bottom: 2rpx solid #DFDFE0;
				overflow: hidden;
				.title{
					flex: 1;
					font-weight: 500;
					font-size: 32rpx;
					color: #303133;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.status{
					width: 100rpx;
					min-width: 100rpx;
					height: 44rpx;
					font-size: 24rpx;
					color: #F3F4F6;
					text-align: center;
					line-height: 44rpx;
					margin-left: 16rpx;
					background-color: #30D6C2;
					border-radius: 22rpx;
				}
				.status-1{
					background-color: #1FA293;
				}
				.status-2{
					background-color: #D1268D;
				}
				.status-3{
					background-color: #616363;
				}
				.status-over{
					background-color: #0A453E;
				}
			}
			.info-wrap{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 24rpx 0;
				.info{
					flex: 1;
					height: 104rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					.time{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.label{
							font-size: 24rpx;
							color: #606266;
							text-align: left;
						}
						.date{
							font-size: 28rpx;
							color: #606266;
							text-align: left;
						}
					}
				}
				
			}
			.groups{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 0;
				.title{
					font-size: 24rpx;
					color: #606266;
					white-space: nowrap;
				}
				.group-logo{
					flex: 1;
					margin-left: 22rpx;
					.logo-wrap{
						position: relative;
						box-sizing: border-box;
						display: inline-block;
						width: 44rpx;
						height: 44rpx;
						margin-left: -22rpx;
						overflow: hidden;
						border: 2rpx solid #fff;
						border-radius: 50%;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.content{
			margin: 0 24rpx;
			padding-bottom: 180rpx;
			.detail-title{
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
				line-height: 56rpx;
				text-align: left;
				margin-top: 26rpx;
				margin-bottom: 22rpx;
			}
			.detail-imgs{
				width: 100%;
				font-size: 0;
				.img{
					display: inline-block;
					width: 208rpx;
					height: 208rpx;
					margin-right: 24rpx;
					margin-bottom: 14rpx;
					overflow: hidden;
				}
				.img:nth-of-type(3n){
					margin-right: 0;
				}
			}
			.detail-desc{
				font-weight: 400;
				font-size: 28rpx;
				color: #606266;
				line-height: 50rpx;
				text-align: left;
			}
		}
		.oper-wrap{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 140rpx;
			background-color: #30D6C2;
			.btn{
				width: 272rpx;
				height: 80rpx;
				.icon{
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
				.label{
					font-weight: 500;
					font-size: 32rpx;
					color: #303133;
				}
			}
			.btn:first-of-type{
				margin-right: 46rpx;
			}
		}
	}
</style>
